<template>
	<div v-cloak class="aui-wrapper aui-page__iframe">
		<div class="aui-content__wrapper">
			<div class="aui-content">
				<el-card shadow="never" class="aui-card--fill">
					<div class="mod-lswms__recipients">
						<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
							<el-form-item>
								<el-input v-model="dataForm.cardid" size="small" placeholder="领用人号" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dataForm.recipientid" size="small" placeholder="领用人卡ID" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dataForm.recipient" size="small" placeholder="领用人" clearable>
								</el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dataForm.sku" size="small" placeholder="物料编码" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dataForm.descr" size="small" placeholder="物料名称" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<el-input v-model="dataForm.factorycdoe" size="small" placeholder="计量编码/工装号" clearable>
								</el-input>
							</el-form-item>
							
								<el-form-item v-show="false">
									<el-input v-model="dataForm.sort" size="small" placeholder="类别" clearable></el-input>
								</el-form-item>
								<el-form-item>
									<el-cascader v-model="sortvalue" :options="skucategoryList" size="small" placeholder="类别"
										:props="{ value: 'categorykey' ,label:'name',expandTrigger:'hover',checkStrictly:true }" :show-all-levels="false"
										@change="handleChange" clearable>
									</el-cascader>
								</el-form-item>
						
							<el-form-item>
								<el-input v-model="dataForm.lot7" size="small" placeholder="部门" clearable></el-input>
							</el-form-item>
							<el-form-item>
								<!-- <el-input v-model="dataForm.status" placeholder="状态" clearable></el-input> -->
								<el-select size="small" v-model="dataForm.status" placeholder="状态">
									<el-option value="" label="--"> </el-option>
									<el-option v-for="item in recipientStatus" :key="item.list" :label="item.listname"
										:value="item.list">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<!-- <el-input v-model="dataForm.recipienttype" placeholder="类型" clearable></el-input> -->
								<el-select size="small" v-model="dataForm.recipienttype" placeholder="类型">
									<el-option value="" label="--"> </el-option>
									<el-option v-for="item in recipientType" :key="item.list" :label="item.listname"
										:value="item.list">
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item>
								<el-date-picker v-model="dataForm.recipienttime" type="daterange" size="small"
									range-separator="至" start-placeholder="领用日期-开始" end-placeholder="领用日期-结束">
								</el-date-picker>
							</el-form-item>
							<el-form-item>
								<el-button size="small" @click="getDataList()">查询</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="small" @click="addOrUpdateHandle()"
									v-if="hasPermission('lswms:recipients:save')">新增</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="small" @click="releaseHandleFn()"
									v-if="hasPermission('lswms:recipients:release')">发放</el-button>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" size="small" @click="deliveryHandleFn()"
									v-if="hasPermission('lswms:recipients:delivery')">发货</el-button>
							</el-form-item>
							<!-- <el-form-item>
								<el-button type="danger" @click="deleteHandle()">删除</el-button>
							</el-form-item> -->
							<el-form-item>
								<el-button type="info"  size="small" @click="exportHandle()">导出</el-button>
							</el-form-item>
						</el-form>
						<el-table v-loading="dataListLoading" :data="dataList" border
							@selection-change="dataListSelectionChangeHandle" @sort-change="dataListSortChangeHandle"
							style="width: 100%;">
							<el-table-column type="selection" header-align="center" align="center" width="50">
							</el-table-column>
							<!-- <el-table-column prop="id" label="序号" header-align="center" align="center">
							</el-table-column> -->
							<el-table-column prop="recipientkey" label="领用号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="cardid" label="领用人号" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="recipientid" label="领用人卡ID" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="recipient" label="领用人" header-align="center" align="center">
							</el-table-column>
							<!-- 	<el-table-column prop="recipienttype" label="类型" header-align="center" align="center">
							</el-table-column> -->
							<el-table-column prop="recipienttypestr" label="类型" header-align="center" align="center">
							</el-table-column>
							<!-- <el-table-column prop="status" label="状态" header-align="center" align="center">
							</el-table-column> -->
							<el-table-column prop="statusstr" label="状态" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="priority" label="优先级" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="sku" label="物料编码" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="descr" label="物料名称" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="factorycdoe" label="计量编码/工装号" header-align="center" align="center"></el-table-column>
							<el-table-column prop="preqty" label="预期数量" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="qty" label="数量" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="lot7" label="部门" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="recipienttime" label="领用时间" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="issuer" label="发布人" header-align="center" align="center">
							</el-table-column>
							<el-table-column prop="backqty" label="归还数量" header-align="center" align="center">
							</el-table-column>
							<el-table-column type="expand" fixed="right" label="详情">
								<template #default="props">

									<!-- 	<el-table-column prop="lot" label="批号" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="fromloc" label="自库位" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="fromtray" label="自托盘" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="frombox" label="自箱号" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="loc" label="当前库位" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="tray" label="当前托盘" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="box" label="当前箱号" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="toloc" label="至库位" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="totray" label="至托盘" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="tobox" label="至箱号" header-align="center" align="center">
									</el-table-column>
											<el-table-column prop="warehouse" label="仓库" header-align="center" align="center">
											</el-table-column> -->
									<!-- <el-table-column prop="department" label="部门" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="reserve1" label="备用字段1" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="reserve2" label="备用字段2" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="reserve3" label="备用字段3" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="reserve4" label="备用字段4" header-align="center" align="center">
									</el-table-column>
									<el-table-column prop="reserve5" label="备用字段5" header-align="center" align="center">
									</el-table-column> -->

									<el-form label-position="left" inline class="demo-table-expand">
										<el-row>
											<el-col :span="4">
												<el-form-item label="批号:">
													<span>{{ props.row.lot }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="自库位:">
													<span>{{ props.row.fromloc }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="自箱:">
													<span>{{ props.row.fromtray }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="自格:" style="">
													<span>{{ props.row.frombox }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="当前库位:">
													<span>{{ props.row.loc }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="当前箱:">
													<span>{{ props.row.tray }}</span>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="4">
												<el-form-item label="当前格:">
													<span>{{ props.row.box }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="至库位:">
													<span>{{ props.row.toloc }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="至箱:">
													<span>{{ props.row.totray }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="至格:" style="">
													<span>{{ props.row.tobox }}</span>
												</el-form-item>
											</el-col>
											<!-- <el-col :span="4">
												<el-form-item label="部门:">
													<span>{{ props.row.department }}</span>
												</el-form-item>
											</el-col> -->
											<el-col :span="4">
												<el-form-item label="备用字段1:">
													<span>{{ props.row.reserve1 }}</span>
												</el-form-item>
											</el-col>

											<el-col :span="4">
												<el-form-item label="备用字段2:">
													<span>{{ props.row.reserve2 }}</span>
												</el-form-item>
											</el-col>
										</el-row>
										<el-row>
											<el-col :span="4">
												<el-form-item label="备用字段3">
													<span>{{ props.row.reserve3 }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="备用字段4">
													<span>{{ props.row.reserve4 }}</span>
												</el-form-item>
											</el-col>
											<el-col :span="4">
												<el-form-item label="备用字段5:" style="">
													<span>{{ props.row.reserve5 }}</span>
												</el-form-item>
											</el-col>

										</el-row>
									</el-form>
								</template>
							</el-table-column>
							<!-- <el-table-column prop="adduser" label="创建人"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="addtime" label="创建时间"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="updatuser" label="更新人"  header-align="center"
                                           align="center"></el-table-column>
                                                    <el-table-column prop="updatetime" label="更新时间"  header-align="center"
                                           align="center"></el-table-column> -->
							<el-table-column label='操作' fixed="right" header-align="center" align="center" width="100">
								<template #default="scope">
									<el-button type="text" size="small"
										v-if="(scope.row.status == 0 || scope.row.status == 7 ) && hasPermission('lswms:recipients:update')"
										@click="addOrUpdateHandle(scope.row.id)">修改
									</el-button>
									<el-button type="text" size="small"
										v-if="scope.row.status == 0 && hasPermission('lswms:recipients:delete') "
										@click="deleteHandle(scope.row.id)"> 删除
									</el-button>
									<el-button type="text" size="small"
										v-if="(scope.row.status == 9 ||scope.row.status == 15 ) &&  scope.row.recipienttype=='BORROW' && hasPermission('lswms:recipientsback:save')"
										@click="backHandle(scope.row.recipientkey)">归还
									</el-button>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit"
							:total="total" layout="total, sizes, prev, pager, next, jumper"
							@size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle">
						</el-pagination>
						<!-- 弹窗, 新增 / 修改 -->
						<recipientsAddOrUpdate v-if="addOrUpdateVisible" ref="addOrUpdate"
							@refresh-data-list="getDataList"></recipientsAddOrUpdate>
						<recipientsbackAddOrUpdate v-if="backaddOrUpdateVisible" ref="backaddOrUpdate"
							@refresh-data-list="getDataList"></recipientsbackAddOrUpdate>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
	import DataList from "@/utils/DataList";
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue';

	import {
		putRelease
	} from "@/network/lswms/recipient/Recipients.js"

	import recipientsAddOrUpdate from "@/components/lswms/recipient/RecipientsAddOrUpdate";
	import recipientsbackAddOrUpdate from "@/components/lswms/recipient/RecipientsbackAddOrUpdate";
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'
	import {
		putDelivery
	} from "@/network/lswms/recipient/Recipients.js"
	import {
		getCodeListByCode
	} from "@/network/lswms/base/Codelist.js"
	import {
			getSkucategoryById,
			getSkucategoryByType
		} from "@/network/lswms/base/Skucategory"
	import {
		hasPermission
	} from "@/utils/hasPermission"
	export default {
		name: "recipients",

		components: {
			recipientsAddOrUpdate,
			recipientsbackAddOrUpdate
		},

		setup() {
			const {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate
			} = DataList();

			onMounted(() => {
				mixinViewModuleOptions.value.getDataListIsPage = true;
				mixinViewModuleOptions.value.getDataListURL = '/lswms/recipients/page';
				mixinViewModuleOptions.value.deleteURL = '/lswms/recipients';
				mixinViewModuleOptions.value.exportURL = '/lswms/recipients/export';
				mixinViewModuleOptions.value.deleteIsBatchKey = 'id';
				mixinViewModuleOptions.value.deleteIsBatch = true
				if (mixinViewModuleOptions.value.activatedIsNeed) {
					getDataList();
				}
				recipientTypeFn();
				recipientStatusFn();
				getSkucategoryList();
			})

			const backaddOrUpdateVisible = ref(false)
			const backaddOrUpdate = ref(null)
			// 新增 / 修改
			const backHandle = (recipientkey) => {
				//
				backaddOrUpdateVisible.value = true;
				nextTick(function() {
					backaddOrUpdate.value.dataForm.recipientkey = recipientkey;
					backaddOrUpdate.value.init();
				})
			}

			//领用类型
			const recipientType = ref("");
			const recipientTypeFn = () => {
				getCodeListByCode('RECIPIENTTYPE').then((res) => {
					if (res.code != 0) {
						return ElMessage.error(res.msg);
					}
					recipientType.value = res.data;
				}).catch((err) => {});
			}
			//领用状态
			const recipientStatus = ref("");
			const recipientStatusFn = () => {
				getCodeListByCode('RECIPIENTSTATUS').then((res) => {
					if (res.code != 0) {
						return ElMessage.error(res.msg);
					}
					recipientStatus.value = res.data;
				}).catch((err) => {});
			}

			//发放
			const releaseHandleFn = () => {
				if (dataListSelections.value.length <= 0) {
					return ElMessage({
						message: '请选择领用记录',
						type: 'warning',
						duration: 1000
					});
				}
				ElMessageBox.confirm('确定要发放所选的领用记录? ', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {
					let para = dataListSelections.value.map(function(item) {
						return {
							"recipientkey": item["recipientkey"]
						}
					})
					putRelease(para).then(function(res) {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
							}
						});
					}).catch(function() {});

				}).catch(function() {})
			}

			//发货
			const deliveryHandleFn = () => {
				if (dataListSelections.value.length <= 0) {
					return ElMessage({
						message: '请选择领用记录',
						type: 'warning',
						duration: 1000
					});
				}
				ElMessageBox.confirm('确定要领取所选的领用记录吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function() {

					let para = dataListSelections.value.map(function(item) {
						return {
							"recipientkey": item["recipientkey"]
						}
					})
					putDelivery(para).then(function(res) {
						if (res.code != 0) {
							return ElMessage.error(res.msg);
						}
						ElMessage({
							message: '操作成功',
							type: 'success',
							duration: 500,
							onClose: function() {
								getDataList();
							}
						});
					}).catch(function() {});

				}).catch(function() {})
			}


			const sortvalue = ref([]);
			const handleChange = (sortvalue) =>{
				dataForm.value.sort = "";
				if(!sortvalue){
					return ;
				}
				for (let i = 0; i < sortvalue.length; i++) {
					dataForm.value.sort += sortvalue[i] + '#';
				}
				console.log(dataForm.value.sort );
			}
			
			const skucategoryList = ref([]);
			const getSkucategoryList = () => {
				return getSkucategoryByType(0)
					.then(function(res) {
						if (res.code !== 0) {
							return ElMessage.error(res.msg);
						}
						// skucategoryList.value = res.data;
			
						let data1 = [];
						createList(res.data, data1);
						skucategoryList.value = data1;
					})
					.catch(function() {});
			}
			const createList = (sourcedata, targetdata) => {
				for (let i = 0; i < sourcedata.length; i++) {
					let tempdata = sourcedata[i];
					if (tempdata.children.length > 0) {
						let children = {
							categorykey: '',
							name: '',
							children: []
						}
						children.categorykey = tempdata.categorykey;
						children.name = tempdata.name;
						createList(tempdata.children, children.children);
						targetdata.push(children)
					} else {
						let children = {
							categorykey: '',
							name: ''
						}
						children.categorykey = tempdata.categorykey;
						children.name = tempdata.name;
						targetdata.push(children)
					}
				}
			
			}

			return {
				dataForm,
				mixinViewModuleOptions,
				getDataList,
				dataList,
				total,
				page,
				limit,
				dataListLoading,
				dataListSelectionChangeHandle,
				dataListSortChangeHandle,
				pageSizeChangeHandle,
				pageCurrentChangeHandle,
				addOrUpdateHandle,
				deleteHandle,
				exportHandle,
				addOrUpdateVisible,
				dataListSelections,
				addOrUpdate,
				backaddOrUpdateVisible,
				backaddOrUpdate,
				backHandle,
				releaseHandleFn,
				deliveryHandleFn,
				recipientType,
				recipientStatus,
				skucategoryList,
				sortvalue,
				handleChange
			}
		},
		methods: {
            hasPermission
        }
	}
</script>

<style scoped>

</style>
